<template>
    <div class=" cursor-pointer">
        <box :title="title">
            <!-- 日期选择 -->
            <template #title-right>
                <div class="flex " v-if="isShow">
                    <div v-for="(item, index) in timeList" :key="index" class="text-[#ffffff] w-[26px] h-[26px]
                   " :class="selectTime == index ? 'bg-[url(@/assets/screenimg/samllIcon6.png)]' : 'bg-[url(@/assets/screenimg/samllIcon5.png)]'"
                        @click.stop="changeTime(item, index)">
                        <div class="text-center leading-[26px]">
                            {{ isNullOrEmpty( item?.name ) }}
                        </div>
                    </div>
                </div>
            </template>
            <div class="h-[116px]">
                <transition name="el-fade-in"><!--px-[16px] py-[36px] -->
                    <div v-show="isshowlefts" class="alltext h-full flex items-center">
                        <div class="flex-1 pl-[16px]" v-for="(item, index) in data" :key="index" @click="item?.clickFun()" >
                            <div class="flex">
                                <div class="w-[16px] h-[16px] !rounded-[50%] mr-[8px]">
                                    <img class="w-[16px] h-[16px] !rounded-[50%]" :src="item.img" />
                                </div>
                                <div>
                                       {{ isNullOrEmpty( item.name ) }}
                                </div>
                            </div>
                            <div class="ml-[24px] pt-[12px] text-[24px] font-medium"
                                :class="item.type == 1 ? 'text-[#21CC31]' : item.type == 2 ? 'text-[#27E6E1]' : item.type == 3 ? 'text-[#FF802B]' : 'gradient-text'">
                                <ReNormalCountTo v-if="item.number <= 999" :endVal="item.number"
                                    :duration="Math.random() * 1000 + 1000" />
                                <div v-else>999+</div>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </box>

    </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty} from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import { ReNormalCountTo } from '@/components/ReCountTo/index'
const props = defineProps({
    isShow: {
        type: Boolean,
        default: true
    },
    data: {
        type: Object,
    },
    isshowlefts: {
        type: Boolean,
        default: false
    },
    timeList: {
        type: Array,
        default: () => []
    },
    type: {
        type: Number,
        default: 1
    },
    selectTime: {
        type: Number,
        default: 0
    },
    title: {
        type: String,
        default: ''
    },
    customClickEvents: {
        type: Function,
        default: () => { }
    }
});


const emit = defineEmits(['changeList',])
const changeTime = (item: any, index) => {

    emit('changeList', item, props.type, index)

}
</script>
<style scoped lang="scss"></style>
